<template>
  <el-card>

    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/welcome'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>系统用户管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-row :gutter="12">
      <el-col :span="6">
        <el-input clearable @clear="listPage" v-model="username" placeholder="请输入管理员名称查询"></el-input>
      </el-col>
      <el-col :span="6">
        <el-button type="primary" icon="el-icon-search" @click="listPage">查询</el-button>
        <el-button type="success" icon="el-icon-plus" @click="openAddDialog">添加</el-button>
      </el-col>
    </el-row>

    <el-table :data="tableData">
      <el-table-column prop="username" label="管理员名称"></el-table-column>
      <el-table-column prop="password" label="密码"></el-table-column>
      <el-table-column prop="images" label="头像">
        <template slot-scope="scope">
          <img :src="scope.row.images" style="width: 4opx;height: 40px;">
        </template>
      </el-table-column>

      
      <el-table-column prop="stats" label="状态">
        <template slot-scope="scope">
          <el-switch @change="changeStats(scope.row)"
            v-model="scope.row.stats"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="0"
            :inactive-value="1">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip content="点击修改" placement="left">
            <el-button type="warning" icon="el-icon-edit" circle @click="openEditDialog(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip content="点击删除" placement="right">
            <el-button type="danger" icon="el-icon-delete" circle @click="remove(scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page.sync="pager.page"
    :page-size="pager.size"
    :page-sizes="[5, 10, 15, 20]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="pager.total"
    ></el-pagination>

    <el-dialog :visible.sync="addFlag" title="添加管理员信息" :close-on-click-modal="false">
      <el-form>
        <el-form-item>
          <el-input v-model="administrators.username" placeholder="请输入管理员名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="administrators.password" placeholder="请输入密码" type="password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="administrators.images" placeholder="请输入头像地址"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFlag = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 定义修改对话框 -->
    <el-dialog title="修改管理员信息" :visible.sync="editFlag" :close-on-click-modal="false">
      <el-form>
        <el-form-item>
          <el-input placeholder="请输入管理员名称" v-model="administrators.username"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入密码" v-model="administrators.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入头像地址" v-model="administrators.images"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editFlag = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>
  export default{
    data(){
      return {
        addFlag:false,
        editFlag:false,
        tableData:[],
        pager:{
          page:1,
          size:5,
          total:0
        },
        username:'',
        administrators:{
          aid:0,
          username:'',
          password:'',
          images:'',
          stats:''
        }
      }
    },
    methods:{
      openAddDialog(){
        this.addFlag = !this.addFlag;
      },
      openEditDialog(row){
        this.editFlag=!this.editFlag;
        this.administrators=row;
      },
      update(){
        this.$http.post('http://127.0.0.1/administrators/update',this.administrators)
        .then(res=>{
          if(res.data.code==200){
            this.$message({
              message: res.data.message,
              type: 'success'
            });
            this.editFlag = !this.editFlag;
            this.listPage();
          }
        })
      },
      save(){
        this.$http.post('http://127.0.0.1/administrators/save',this.administrators)
        .then(res=>{
          if(res.data.code==200){
            this.$message({
              message: res.data.message,
              type: 'success'
            });
            this.addFlag = !this.addFlag;
            this.listPage();
          }
        })
      },
      remove(row){
        this.$http.post('http://127.0.0.1/administrators/remove?aid='+row.aid)
        .then(res=>{
          if(res.data.code==200){
            this.$message({
              message: res.data.message,
              type: 'success'
            });
            this.listPage();
          }
        })
      },
      changeStats(row){
        this.administrators = row;
        this.$http.post('http://127.0.0.1/administrators/changeStats',this.administrators)
        .then(res=>{
          if(res.data.code==200){
            this.$message({
              message: res.data.message,
              type: 'success'
            });
            this.listPage();
          }
        })
      },
      handleCurrentChange(val){
        console.info("改变分页起始数据"+val)
        this.pager.page=val;
        this.listPage()
      },
      handleSizeChange(val){
        console.info("改变每页显示的最大条数"+val)
        this.pager.size=val;
        this.listPage()
      },
      listPage(){
        this.$http.get('http://127.0.0.1/administrators/listPage',{
          params:{
            page:this.pager.page,
            size:this.pager.size,
            username:this.username
          }
        }).then(res=>{
          console.info(res);
          this.tableData = res.data.data.data;
          this.pager.total = res.data.data.count;
        })
      }
    },
    created(){
      this.listPage();
    }
  }
</script>

<style>
  .el-breadcrumb{
    padding-bottom: 12px;
  }
  .el-pagination{
    padding-top: 12px;
  }
</style>
